<template>
  <el-dialog
      @close="chapterFileDialogClose"
      v-model="chapter_file_dialogVisible"
      title="修改章节附件"
      width="30%"
  >
    <DataSpace @putList="putDataSpaceFileListInChapterfileList"></DataSpace>
    <el-upload
        ref="upload"
        class="upload-demo"
        action="/api/teacher/PutFile"
        :on-remove="handleChangeChapterSeries"
        :headers="fileUpHead"
        :on-change="handleChangeChapterSeries"
        :file-list="ChapterfileList"
    >

      <el-button size="small" type="primary">选择本地文件</el-button>
      <template #tip>
        <div class="el-upload__tip">

        </div>
      </template>
    </el-upload>
    <el-button type="primary" @click="UpdateChapterFile()">修改</el-button>
  </el-dialog>


  <el-dialog
      @close="curriculumFileDialogClose"
      v-model="curriculum_file_dialogVisible"
      title="Tips"
      width="30%"
  >
    <DataSpace @putList="putDataSpaceFileListInCurriculumFileList"></DataSpace>
    <el-upload
        ref="upload"
        class="upload-demo"
        action="/api/teacher/PutFile"
        :on-remove="handleChangeCurriculumSeries"
        :headers="fileUpHead"
        :on-change="handleChangeCurriculumSeries"
        :file-list="CurriculumfileList"
    >

      <el-button size="small" type="primary">选择本地文件</el-button>

      <template #tip>
        <div class="el-upload__tip">

        </div>
      </template>
    </el-upload>
    <el-button type="primary" size="small" @click="UpdateCurriculumFile(this.changingCurrFile)">修改</el-button>
  </el-dialog>



  <el-dialog
      @close="addChapterDialogClose"
      v-model="dialogVisible"
      title="新建章节"
      width="30%"
  >
    <el-input class="mb-5" v-model="addChapter.chapter_name" placeholder="章节名" clearable/>
    <el-input class="mb-5" v-model="addChapter.chapter_describe" placeholder="章节简介" clearable/>
    <DataSpace @putList="putDataSpaceFileListInFileList"></DataSpace>
    <el-upload
        ref="upload"
        class="upload-demo mt-5"
        action="/api/teacher/PutFile"
        :on-remove="handleChange"
        :headers="fileUpHead"
        :on-change="handleChange"
        :file-list="fileList"
    >

      <el-button size="small" type="primary">选择本地文件</el-button>
      <template #tip>
        <div class="el-upload__tip">
        </div>
      </template>
    </el-upload>
    <p>选择位置</p>
    位于
    <el-select v-model="addChapterDialogLocations_sel" class="m-2" placeholder="Select" size="large">
      <el-option
          v-for="item in addChapterDialogLocations"
          :key="item.ChapterSort"
          :label="item.ChapterName"
          :value="item.ChapterSort"
      >
      </el-option>
    </el-select>
    之前
    <template #footer>
                          <span class="dialog-footer">
                          <el-button @click="dialogVisible = false">取消</el-button>
                          <el-button type="primary" @click="putNewChapter">新建章节</el-button>
                          </span>
    </template>
  </el-dialog>

  <div class="row">
    <div class="col-md-12 col-sm-12">
      <div class="panel panel-default">
        <div class="panel-heading h-24 h-24 flex items-center">
          已开课列表
          <el-button type="primary" @click="jumpTo('add_curriculum',{'curriculumSeriesId':seriesId})"
                     class="float-right" style="margin-left: auto">开课
<!--            <el-icon :size="20" style="vertical-align: middle;">-->
<!--              <Plus/>-->
<!--            </el-icon>-->
          </el-button>
        </div>
        <div class="panel-body">
          <el-scrollbar>


          <ul class="nav nav-tabs flex w-full " style="width: max-content">
            <li class="" :class="i===0?'active':''" v-for="(item,i) in curriculum_list"><a
                :href="'#'+item.Curriculum.CurriculumYear"
                data-toggle="tab">{{ item.Curriculum.CurriculumYear }}
              <el-button size="small" type="primary" @click="delCurr(item)" circle>
                <el-icon>
                  <DocumentDelete/>
                </el-icon>
              </el-button>

            </a>

            </li>
          </ul>
          </el-scrollbar>

          <div class="tab-content pt-10">

            <div class="tab-pane fade" :class="i===0?' active in':''" v-for="(item,i) in curriculum_list"
                 :id="item.Curriculum.CurriculumYear">

              <el-button type="primary" @click="beginToUpdateCurriculumFile(item)">修改课程附件</el-button>
              <el-button type="primary" @click="beginToInsertChapter(item)">添加课程章节</el-button>
              <el-button type="primary" @click="$ses.pushByNameResId('ChangeCurrsStuList',{currId:item.Curriculum.ID})">修改课程参与的学生</el-button>



              <el-collapse v-model="activeChapter" class="mt-10" accordion>
                <el-collapse-item :title="'章节名称：'+activity.ChapterName" :name="index"
                                  v-for="(activity, index) in item.ChapterList">
                  <div>
                    {{ '章节简介：' + activity.ChapterDescribe }}
                  </div>
                  <div>
                    <el-button type="primary" @click="beginToUpdateChapterFile(activity)">修改章节附件</el-button>
                    <el-button type="primary" @click="DelChapter(activity)">删除章节</el-button>
                  </div>
                </el-collapse-item>
              </el-collapse>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /. ROW  -->


</template>

<script setup>
import {
  Plus,
  DocumentDelete
} from "@element-plus/icons-vue";
</script>

<script>
import axios from "axios";
import {ElMessage, ElMessageBox} from 'element-plus'
import {defineComponent, h} from 'vue'
import {MoreFilled} from '@element-plus/icons'
import DataSpace from "../components/DataSpace";

export default {
  name: "add_curriculum_series",
  components: {DataSpace},
  mounted() {
    var parse = JSON.parse(window.localStorage.getItem('zjxClass_teacherinfo'));
    this.fileUpHead = {
      'tk': parse.Token
    }
    this.seriesId = this.$route.query.seriesId
    this.SetupData();
  },
  data() {
    return {
      activeChapter: '1',
      beginToUpdateChapterDataId: '',
      beginToUpdateCurriculumDataId: '',
      CurriculumfileList: [],
      ChapterfileList: [],
      fileList: [],
      fileUpHead: {
        'dwa': "wa"
      },
      addChapter: {
        chapter_name: '',
        chapter_sort: '',
        chapter_describe: '',
        chapter_data: '',
        curriculum_id: '',
      },
      addChapterDialogLocations: [],
      changingCurrFile : {},
      addChapterDialogLocations_sel: '',
      seriesId: '',
      curriculum_name: '',
      dialogVisible: false,
      curriculum_file_dialogVisible: false,
      chapter_file_dialogVisible: false,
      curriculum_list: [
        {
          ChapterList: [],
          Curriculum: {
            ID: "",
          }
        }
      ],
      activities: [
        {
          content: 'Custom icon',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: MoreFilled,
        },
        {
          content: 'Custom color',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87',
        },
        {
          content: 'Custom size',
          timestamp: '2018-04-03 20:46',
          size: 'large',
        },
        {
          content: 'Custom hollow',
          timestamp: '2018-04-03 20:46',
          type: 'primary',
          hollow: true,
        },
        {
          content: 'Default node',
          timestamp: '2018-04-03 20:46',
        },
      ],
    }
  },
  methods: {
    chapterFileDialogClose() {
      this.ChapterfileList = []
    },
    curriculumFileDialogClose() {
      this.CurriculumfileList = []
    },
    addChapterDialogClose() {
      this.fileList = []
    },
    putDataSpaceFileListInCurriculumFileList(list){
      this.CurriculumfileList = [...this.CurriculumfileList, ...list]
    },
    DelChapter(activity) {
      axios.post('/api/teacher/DelChapter', {ID: activity.ID, ChapterSort: activity.ChapterSort}).then((res) => {
        if (res.status === 200) {
          ElMessage.success({
            message: 'ok'
          })
        }
      })
    },
    SetupData: function () {
      axios.post("/api/teacher/GetCurriculumsBySeriesId", {
        "series_id": this.seriesId,
      }).then((res) => {
        if (res.status === 200) {
          this.curriculum_list = res.data
          console.log(this.curriculum_list)
        }
      })
    },
    delCurr(item) {
      axios.get("/api/teacher/DeleteCurriculum", {params: {id: item.Curriculum.ID}}).then((res) => {
        if (res.status === 200 && res.data === 'delSuc') {
          ElMessage.success({
            message: '删除成功'
          })
          this.SetupData()
        }
      })
    },
    beginToInsertChapter(item) {
      this.addChapter.curriculum_id = item.Curriculum.ID
      this.addChapterDialogLocations = []
      for (const itemKey of item.ChapterList) {
        this.addChapterDialogLocations.push(itemKey)
      }

      this.addChapterDialogLocations.push({
        ChapterSort: item.ChapterList.length + 1 + "",
        ChapterName: '最后'
      })
      this.addChapterDialogLocations_sel = this.addChapterDialogLocations[this.addChapterDialogLocations.length - 1].ChapterSort
      this.dialogVisible = true
    },
    beginToUpdateCurriculumFile(item) {
      this.changingCurrFile = item
      this.curriculum_file_dialogVisible = true
      axios.post("/api/GetFileList", {
        'IdList': item.Curriculum.CurriculumData
      }).then((res) => {
        this.CurriculumfileList = res.data
      })
    },
    beginToUpdateChapterFile(item) {
      this.beginToUpdateChapterDataId = item.ID
      console.log(item)
      this.chapter_file_dialogVisible = true
      axios.post("/api/GetFileList", {
        'IdList': item.ChapterData
      }).then((res) => {
        this.ChapterfileList = res.data
      })
    },
    handleChange(file, fileList) {
      console.log(file)
      this.fileList = fileList
    },
    UpdateCurriculumFile(item) {
      var data = {
        id: item.Curriculum.ID,
        chapter_data: ''
      }
      for (const argument of this.CurriculumfileList) {
        if (argument.ID != null) {
          data.chapter_data += "," + argument.ID
        } else {
          data.chapter_data += "," + argument.response.ID
        }

      }
      axios.post("/api/teacher/UpdateCurriculumData", data).then((res) => {
        if (res.status === 200) {
          ElMessage.success({
            message:'修改课程附件成功'
          })
          this.SetupData();
        }
        this.curriculum_file_dialogVisible = false
      })
    },
    UpdateChapterFile() {
      var data = {
        id: this.beginToUpdateChapterDataId,
        chapter_data: ''
      }
      for (const argument of this.ChapterfileList) {
        if (argument.ID != null) {
          data.chapter_data += "," + argument.ID
        } else {
          data.chapter_data += "," + argument.response.ID
        }
      }

      axios.post("/api/teacher/UpdateChapterData", data).then((res) => {

        if (res.status === 200) {
          ElMessage.success({
            message: "修改附件成功"
          })
          this.SetupData();
        }
        this.chapter_file_dialogVisible = false
      })
    },
    handleChangeCurriculumSeries(file, fileList) {
      this.CurriculumfileList = fileList
    },
    handleChangeChapterSeries(file, fileList) {
      this.ChapterfileList = fileList
    },
    jumpTo: function (name, data) {
      this.$router.push({name: name, query: data})
    },
    putDataSpaceFileListInFileList(list) {
      this.fileList = [...this.fileList, ...list]
    },
    putDataSpaceFileListInChapterfileList(list) {
      this.ChapterfileList = [...this.ChapterfileList, ...list]
    },
    putNewChapter() {
      var data = {}
      data = this.addChapter
      data.chapter_sort = this.addChapterDialogLocations_sel
      for (const argument of this.fileList) {
        if (argument.ID === undefined) {
          data.chapter_data += "," + argument.response.ID
        } else {
          data.chapter_data += "," + argument.ID
        }
      }
      console.log(data)
      axios.post("/api/teacher/AddNewChapter", data).then((res) => {
        if (res.status === 200) {
          ElMessage.success('新建章节成功')
          this.dialogVisible = false
          axios.post("/api/teacher/GetCurriculumsBySeriesId", {
            "series_id": this.seriesId,
          }).then((res) => {
            if (res.status === 200) {
              this.curriculum_list = res.data
            }
            this.dialogVisible = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.nav-tabs li a{
  /*border-bottom: 1px solid #ddd;*/
}
</style>